<template>
  <de-container class="pa-5">
    <avue-crud
      ref="crud"
      v-model="form"
      :page.sync="page"
      :data="tableData"
      :table-loading="tableLoading"
      :option="tableOption"
      :search.sync="searchForm"
      @on-load="loadListData"
      @search-change="onSearchChange"
      @keyup.enter="onSearchChange"
      @search-reset="onSearchReset"
      @row-save="onRowSave"
      @row-update="onRowUpdate"
      @row-del="onRowDelete"
      @refresh-change="onRefresh"
    >
      <template slot="accessKey" slot-scope="{ row }">
        <div>
          {{ row.accessKey
          }}<i
            v-clipboard:copy="row.accessKey"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
            class="el-icon-document-copy copy-btn"
            @click.stop
          />
        </div>
      </template>
    </avue-crud>
  </de-container>
</template>

<script>
import { requestUserKeyPage, requestUserKeySave, requestUserKeyEdit, requestUserKeyDelete } from '@/api/system/secret'
import DeContainer from '@/components/dataease/DeContainer'
import ListMixin from '@/utils/mixins/list-mixin'
export default {
  name: 'Secret',
  components: { DeContainer },
  mixins: [ListMixin],
  data() {
    return {
      listApi: requestUserKeyPage,
      createApi: requestUserKeySave,
      updateApi: requestUserKeyEdit,
      deleteApi: requestUserKeyDelete,
      tableOption: {
        menuWidth: 320,
        addTitle: '新增秘钥',
        editTitle: '编辑秘钥',
        viewBtn: false,
        selection: false,
        searchMenuPosition: 'left',
        column: [
          {
            label: '名称',
            prop: 'title',
            maxlength: 24,
            search: true,
            rules: [
              { required: true, message: '请输入名称' },
              { max: 24, message: '最多24个字' },
            ],
            span: 12,
            align: 'left',
            overHidden: true,
          },
          {
            label: '秘钥',
            align: 'left',
            prop: 'accessKey',
            editDisplay: false,
            addDisplay: false,
          },
        ],
      },
    }
  },
  created() {},
  methods: {
    onCopy(e) {
      this.$success(this.$t('commons.copy_success'))
    },
    onError(e) {},
  },
}
</script>

<style lang="scss" scoped>
.copy-btn {
  margin: 0 30px;
}
</style>
